<!--
 * @Author: zjf
 * @Date: 2022-09-19 17:50:40
 * @LastEditors: JenClint
 * @LastEditTime: 2024-01-24 10:06:27
 * @Description:
-->
<template>
	<l-layout class="l-tab-page module">
		<div class="module">
			<div id="mapContainer"></div>
			<transition name="expand">
				<Search v-show="!isHide" ref="searchRef" :mapboxmap="mapboxmap" @setMapLayer="addSearchResultToMap"
					@handleDetails="handleDetails" @flyToMap="mapClick" :loading="mapLoading">
					<template #title>
						更新企业查询
						<span class="map-search-hide" @click="hide"><i class="el-icon-arrow-left"></i>折叠</span>
					</template>
				</Search>
			</transition>
			<template v-if="!mapLoading">
				<img class="map-hide" v-show="isHide" @click="hide" :src="`${rootUrl}img/map/hide.png`">
				<Tool class="map-tools" :mapboxmap="mapboxmap" :mapMeasure="mapMeasure"></Tool>
				<Top v-show="!isHide" class="module-top" @change="changeLayer"></Top>
			</template>

			<Legend class="module-legend" :layer="thematicLayer"></Legend>
			<!-- 详情 表单 -->
			<DetailsDialog ref="DetailsDialog" />
		</div>
	</l-layout>
</template>

<script>
import cfmap from "cfmap-4490";

import Vue from 'vue'
import PopupContent from '../../components/popup.vue';
const Popup = Vue.extend(PopupContent)

import unitMap from "../../js/unitMap";

import Search from "../../components/search.vue";
import Tool from "../../components/tool.vue";
import Top from "../../components/top.vue";

import Legend from "../../components/Legend.vue";
import DetailsDialog from "../../../enterpriseManagement/views/enterpriseList/DetailDialogForm/index.vue";

import ResultPointSymbolStyle from "../../js/result-point-symbol-style.json"

import * as turf from '@turf/turf';

export default {
	mixins: [unitMap()],
	components: {
		Search,
		Tool,
		DetailsDialog,
		Legend,
		Top,
	},
	data() {
		return {
			mapboxmap: null,
			mapShowedPopup: null, // 地图中的popup框
			detailsVisible: false,
			formEditRow: {},
			mapMeasure: null,
			isHide: false, // 折叠
			mapLoading: true,

			thematicLayer: "landUseType"
		};
	},
	mounted() {
		this.loadMap();
		this.init()
	},
	computed: {},
	methods: {
		async init() {
		},
		/** 加载底图 专题图 */
		loadMap() {
			this.mapLoading = true
			cfmap.setConfig({
				EPSG: "4490",
			});
			this.mapboxmap = new cfmap.Map({
				container: "mapContainer",
				style: process.env.VUE_APP_BASE_BASEMAP_DARK,
				...this.mapConfig
			});

			this.mapboxmap.resize()
			this.mapboxmap.on('load', () => {

				// 加载列表
				this.$refs.searchRef.loadTableData()


				/** 添加 行政区划 专题图 */
				this.mapboxmap.loadMapStyle(`${process.env.VUE_APP_BASE_BASEMAP_REGION}`)
					.then((styleObj) => {
						//加载地图服务
						this.mapboxmap.addMapStyle(styleObj, {
							styleid: "regions",
							isFlyTo: false,
							isBaseMap: false,
						});
					});

				/** 添加 用地类型 专题图 */
				this.changeLayer({ prop: 'landUseType' })

				this.addMapLayerclickEvent(this.mapboxmap, ['zt_land_p_ydlx', 'zt_land_p_mjss', 'zt_land_p_gxfs', 'zt_land_p_gxjd'])

				// this.showTipEvent()
				this.createMapMeasure()

				this.mapLoading = false
			});

		},

		/** 修改专题图 */
		changeLayer(e) {
			this.mapboxmap.removeMapStyle('landUseType')
			this.mapboxmap.removeMapStyle('averageTaxPerMu')
			this.mapboxmap.removeMapStyle('updateMode')
			this.mapboxmap.removeMapStyle('updateProgress')
			this.thematicLayer = e.prop
			if (e.prop == 'landUseType') {
				this.mapboxmap.loadMapStyle(`${process.env.VUE_APP_BASE_LAYER_LAND_USE_TYPE}`).then((styleObj) => {
					//加载地图服务
					this.mapboxmap.addMapStyle(styleObj, {
						styleid: "landUseType",
						isFlyTo: false,
						isBaseMap: false,
					});
				});
			} else if (e.prop == 'averageTaxPerMu') {
				this.mapboxmap.loadMapStyle(`${process.env.VUE_APP_BASE_LAYER_TAX_PER_MU}`).then((styleObj) => {
					//加载地图服务
					this.mapboxmap.addMapStyle(styleObj, {
						styleid: "averageTaxPerMu",
						isFlyTo: false,
						isBaseMap: false,
					});
				});

			} else if (e.prop == 'updateMode') {
				this.mapboxmap.loadMapStyle(`${process.env.VUE_APP_BASE_LAYER_UPDATE_MODE}`).then((styleObj) => {
					//加载地图服务
					this.mapboxmap.addMapStyle(styleObj, {
						styleid: "updateMode",
						isFlyTo: false,
						isBaseMap: false,
					});
				});
			} else if (e.prop == 'updateProgress') {
				this.mapboxmap.loadMapStyle(`${process.env.VUE_APP_BASE_LAYER_UPDATE_PROGRESS}`).then((styleObj) => {
					//加载地图服务
					this.mapboxmap.addMapStyle(styleObj, {
						styleid: "updateProgress",
						isFlyTo: false,
						isBaseMap: false,
					});
				});
			}
		},

		/** 上图 */
		addSearchResultToMap(data) {
			const newData = this.formatResultData(data)
			const geoJSON = {
				type: 'FeatureCollection',
				features: newData.map(item => ({
					type: 'Feature',
					properties: item,
					geometry: {
						type: 'Point',
						coordinates: item.geom.coordinates
					}
				}))
			};
			const source = this.mapboxmap.getSource('resultPoint');
			if (source) {
				source.setData(geoJSON); // 替换为您要更新的新数据
			} else {
				ResultPointSymbolStyle.sources.resultPoint.data = geoJSON
				this.mapboxmap.addMapStyle(ResultPointSymbolStyle, {
					styleid: "result-point-symbol",
					isFlyTo: false,
					isBaseMap: false,
				});

			}
		},
		/**  坐标图层隐藏 */


		//#region 图标鼠标移动事件 弹出tip
		// 图标鼠标移动事件 弹出tip
		showTipEvent() {
			this.mapboxmap.on('mouseenter', 'resultPointSymbolStyleLayerID', (e) => {
				if (e.features.length > 0) {
					const data = JSON.parse(e.features[0].properties.origin)
					this.showPopup(data)
				}
			});

			this.mapboxmap.on('mouseleave', 'resultPointSymbolStyleLayerID', () => {
				if (this.mapShowedPopup) {
					this.mapShowedPopup.remove();
				}
			});
		},
		showPopup(data) {
			this.formEditRow = data
			const center = data.geoPT.coordinates
			let vm = new Popup({
				propsData: {
					info: data,
				}, //传参
			});
			vm.$mount(); //挂载
			//打开弹窗
			if (this.mapShowedPopup) {
				this.mapShowedPopup
					.setLngLat(center)
					.setOffset([0, -65])
					.setDOMContent(vm.$el)
					.addTo(this.mapboxmap);
			} else {
				this.mapShowedPopup = new cfmap.Popup({
					closeButton: false
				})
					.setOffset([0, -65])
					.setLngLat(center)
					.setDOMContent(vm.$el)
					.setMaxWidth("300px")
					.addTo(this.mapboxmap);
			}
		},
		//#endregion

		//#region 详情

		/** 详情 */
		handleDetails(row, geometry) {
			if (row.land_id) {
				console.log("🏔️ ~  handleDetails ~  row:", row)
				// 点查
				this.formEditRow = row
				var polygon = turf.polygon(geometry.coordinates);
				var centroid = turf.centroid(polygon);
				this.mapClick({ geoJson: geometry, geoPT: centroid.geometry })

				// this.showPopup({...this.formEditRow, geoPT: centroid.geometry })
				// if (this.mapShowedPopup) {
				// 	setTimeout(() => {
				// 		this.mapShowedPopup.remove();
				// 	}, 3000);
				// }
				// this.$refs.DetailsDialog.open({id:row.id})
			}
			else {
				// 列表点击
				this.formEditRow = row
				this.$refs.DetailsDialog.open({ id: row.id, registeredCapitalUnitCode: row.registeredCapitalUnitCode || '' })
			}
		},

		//#endregion




		/** @description: 地图绘图对象  */
		createMapMeasure() {
			this.mapboxmap.addGroupLayer();
			this.mapMeasure = new cfmap.MeasureTool(this.mapboxmap, {
				cursor: 'crosshair'
			});
		},

		hide() {
			this.isHide = !this.isHide
		},

	},
};
</script>

<style lang="scss" scoped>
.text {
	line-height: 24px;
	font-size: 16px;
	font-family: Source-KeynoteartHans-Regular, Source-KeynoteartHans;
	font-weight: 400;
	color: #ffffff;
}

.module {
	width: 100%;
	height: 100%;
	overflow: hidden;
	// color: #fff;
	position: relative;

	#mapContainer {
		width: 100%;
		height: 100%;
	}

	.map-hide {
		position: absolute;
		top: 20px;
		left: 20px;
		background: #fff;
		padding: 5px;
		border-radius: 5px;
		cursor: pointer;
		height: 30px;
		animation: slide 0.2s;
	}

	.map-search-hide {
		cursor: pointer;

		&:hover {
			color: #f4f9ff;
		}
	}

	.map-tools {
		position: absolute;
		top: 20px;
		right: 20px;
	}

	.module-top {
		position: absolute;
		top: 20px;
		right: 60px;
	}

	.module-legend {
		position: absolute;
		bottom: 20px;
		right: 20px;
	}
}

.details-dialog {
	height: 100%;

	::v-deep {
		.l-dialog-window {
			height: 100% !important;
		}

		.el-dialog__body {
			height: 100% !important;
		}
	}
}

::v-deep .mapboxgl-popup-content {
	background: #a4bacd73;

	border-radius: 8px;
	border: 1px solid #6ea8d991;
	backdrop-filter: blur(4.414556503295898px);
}

::v-deep .mapboxgl-popup-tip {
	display: none;
}

.expand-enter-active {
	animation: expand-in 0.2s;
}

.top-enter-active,
.top-leave-active,
.expand-leave-active {
	opacity: 1;
	transition: opacity 0.3s ease-in-out;
}

.top-enter,
.top-leave-to,
.expand-enter,
.expand-leave-to {
	// height: 0;
	opacity: 0;
}

@keyframes expand-in {
	0% {
		opacity: 0;
		width: 350px;
	}

	100% {
		opacity: 1;
		width: 400px;
	}
}

::v-deep .mapboxgl-popup.mapboxgl-popup-anchor-bottom {
	position: absolute;
	top: 0;
}
</style>
